<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <script>
        //1. 扩展运算符可以将数组拆分成以逗号分隔的参数序列
        // let arr = ['a', 'b', 'c']
        // ...arr // a,b,c
        // console.log(...arr);//a b c
        // 注意:参数序列中的逗号被当做了log方法的参数分隔符了 所有真正输出的后的结果没有逗号
        // console.log(a, b, c);

        // 2.扩展运算符应用 - 合并数组
        // (1)合并数组第一种方法
        // let arr1 = [1, 2, 3]
        // // ...arr1 //1,2,3
        // let arr2 = [4, 5, 6]
        // // ...arr2 //3,4,5
        // let arr3 = [...arr1, ...arr2]
        // console.log(arr3);
        // (2)合并数组第二种方法
        // 利用扩展运用符将arr1数组元素拆分成以逗号分隔的参数序列 然后将参数序列直接放到push方法当中 (因为push里的追加数据的参数就是以逗号分隔的 数组被拆分以后也是以逗号分隔的 所以语法完全没有问题)
        // let arr1 = [1, 2, 3]
        // // ...arr1 //1,2,3
        // let arr2 = [4, 5, 6]
        // // ...arr2 //3,4,5
        // // arr1.push(1,2,3,4,5,6)
        // arr1.push(...arr2)
        // console.log(arr1);

        // 3.扩展运算符应用 -将伪数组转换为真正的数组 (伪数组不可使用数组的一些方法例如piush pop等)
        var divs = document.querySelectorAll('div')
        console.log(divs);//NodeList(5) [div, div, div, div, div] 伪数组
        // 用数组中括号包裹扩展运算符 可将伪数组转换为真数组
        var arys = [...divs]
        // 为什么要把伪数组转换为真数组呢？
        // 因为可以使用数组自带的一些方法了 例如push pop等
        arys.push('a')
        console.log(arys);


    </script>
</body>

</html>